<template>
    <div style="display: flex;">
     <div>   自提点1</div>
     <div  style="width: 80%">
     <!-- <el-button type="primary">主要按钮</el-button> -->
     <el-button type="primary"  @click="addGoods">新增商品</el-button>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id"
        width="180">

      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格">
      </el-table-column>
      <el-table-column
      label="操作"
      width="180">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
        <el-button  @click="deleteGoods(scope.row.id)" type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
</div>
<el-dialog
  :title="form.id==0?'新增商品':'修改商品'"
  :visible.sync="dialogVisible"
  width="50%"
  :before-close="handleClose">
  <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="商品名">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="商品类型">
    <el-select v-model="form.categoryId" placeholder="请选择商品类型">
        <el-option v-for="(item,index) in category" :key="'categlory'+index" :label="item.name" :value="item.id" ></el-option>
   
    </el-select>
  </el-form-item>
  <el-form-item label="价格">
    <el-input v-model="form.price"></el-input>
  </el-form-item>
  <el-form-item label="图片">
    <el-input v-model="form.image"></el-input>
  </el-form-item>
  <el-form-item label="描述">
    <el-input v-model="form.description"></el-input>
  </el-form-item>
  <el-form-item  label="分类">
    <!-- <el-input v-for="(flavor, index) in form.flavorsList" :key="index" v-model="form.image"></el-input> -->
    <el-form  v-for="(flavor, index) in form.flavorsList" :key="index" label-width="80px" >
  <el-form-item label="名称">
    <div style="display: flex;flex-wrap: nowrap;">
    <el-input v-model="form.flavorsList[index].name"></el-input><el-button type="danger"  @click=delFlavor(index)>删除分类</el-button>
  </div>
  </el-form-item>
  <el-form-item label="值">
    <div v-for="(flavor2, index2) in form.flavorsList[index].value" :key="'flavorvalue'+index2" ><el-input   v-model="form.flavorsList[index].value[index2]"></el-input><el-button type="danger"  @click=delFlavorValue(index,index2)>删除值</el-button> </div>

  </el-form-item>
  
  <el-button type="primary"  @click=addFlavorValue(index)>新增值</el-button>
</el-form>
<el-button type="primary"  @click=addFlavor>新增分类</el-button>
  </el-form-item>
  
  <el-form-item label="结束时间">
 
      <el-time-picker placeholder="选择时间" v-model="form.removalDate" style="width: 100%;"></el-time-picker>
  </el-form-item>


  <el-form-item label="商品数量">
    <el-input type="text" v-model="form.totalNventory"></el-input>
  </el-form-item>

</el-form>
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click=submitGoods>确 定</el-button>
  
</el-dialog>
</div>
  </template>

  <script>
  import {getCategoryId,getGoods,postGoods,changeGoods,deleteGoods} from '@/api/menu'
  
     export default {
        
mounted() {
    getCategoryId({
        page:1,
        pageSize:2000,
        pickUpPointId:'1814928415657549825'
    }).then(res=>{
        this.category=res.data.records
        
    })
    getGoods({
      page:1,
      pageSize:2000,
        categoryId:"",
        pickupPointId:'1814928415657549825'
    }).then(res=>{
      
      this.tableData=res.data.records
        }
    )
},
      data() {
        return {
            dialogVisible:false,
            category:[],
            formLabelAlign: {
          name: '',
          region: '',
          type: ''
        },
            form: {
            "pickupPointId": '1814928415657549825',
          name: '',
          categoryId: '1814928742486106114',
          price:0,
          image:"",
          "description": "描述",
          "flavorsList": [
    {
      "name": "",
      "value": [""]
    },

  ],
         "removalDate": "",
  "totalNventory": "11"
        },
          tableData: []
        }
      },
   
      methods: {
        
addGoods(){
this.dialogVisible=true;
this.form= {
  id:0,
            "pickupPointId": '1814928415657549825',
          name: '',
          categoryId: '1814928742486106114',
          price:0,
          image:"",
          "description": "描述",
          "flavorsList": [
    {
      "name": "",
      "value": [""]
    },

  ],
         "removalDate": "",
  "totalNventory": "11"
        }
},
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      addFlavor(){
this.form.flavorsList.push( {
      "name": "",
      "value": [""]
    },)
      },
      delFlavor(index){
        this.form.flavorsList.splice(index,1)
      },
      addFlavorValue(index){
        this.form.flavorsList[index].value.push("")
      },
      delFlavorValue(index,index2){
    
        this.form.flavorsList[index].value.splice(index2,1)
      },
      handleClick(row){
        console.log(row)
        this.form=row;
        this.dialogVisible=true
      },
      deleteGoods(id){
        console.log(id)
         deleteGoods(id).then(res=>{
          getGoods({
      page:1,
      pageSize:2000,
        categoryId:"",
        pickupPointId:'1814928415657549825'
    }).then(res=>{
      
      this.tableData=res.data.records
        }
    )
         })
      },
      submitGoods(){
        console.log(this.form)
        if(this.form.id==0){
          postGoods(this.form)
        }
        else{
          changeGoods(this.form)
        }
        this.dialogVisible=false
        
      },
  
    }
    }
  </script>
